<template>
	<view>
		<!--头部提交给谁-->
		<view class="uni-list">
			<view class="uni-list-cell" @click.stop='choosePerson'>
				<view class="uni-list-cell-navigate uni-navigate-right">
					<!--选择了伙伴-->
					<div class='header-div' v-if='getSendPackageTo.img'>
						<image :src="getSendPackageTo.img" mode=""></image>
						<div class='tip padding10'>
							<p class='tip1'>保存并将包裹提交给</p>
							<p class='name'>{{getSendPackageTo.name}}{{getSendPackageTo.isMe?'（本人）': ''}}</p>
						</div>
					</div>
					<!--没有选择伙伴-->
					<div class='header-div' v-if='!getSendPackageTo.img'>
						<div class='tip padding10'>
							<p class='tip1'>保存并将包裹提交给</p>
							<p class='name'>请先选择伙伴</p>
						</div>
					</div>
				</view>
			</view>
		</view>
		
		
		<!--寄件人信息-->
		<div class='itemlist margin_top30 send-info-div'>
			<form>
				<ul>
					<li>
						<view class="jiheader">
							<span class='ji'>寄</span>
							<span class='title'>寄件信息</span>
							<span class='zhantie' @click='AICopy(1)'>智能粘贴</span>
						</view>
					</li>
					<li>
						<input type="text" v-model='sendInfo.name' placeholder="寄件人姓名"/>
						<span class='iconfont icon-xingming choose_user' @click='chooseAddress(1)'></span>
					</li>
					<li>
						<input type="number" v-model='sendInfo.tele' placeholder="手机号/固定电话"/>
					</li>
					<li>
						<input type="text" v-model='sendInfo.address' placeholder="选择地址"/>
						<span class='iconfont icon-you' @click='chooseAddr(1)'></span>
					</li>
					<li>
						<textarea type="text" auto-height v-model='sendInfo.detail_addr' placeholder="请输入详细地址:街道、路、小区、单元"/>
					</li>
				</ul>
				<button size="mini" @click='resetForm(1)'>重置</button>
			</form>
		</div>
		
		<!--收件人信息-->
		<div class="itemlist margin_top30 receive-info-div">
			<form>
				<ul>
					<li>
						<view class="jiheader">
							<span class='ji shou'>收</span>
							<span class='title'>收件信息</span>
							<span class='zhantie' @click='AICopy(2)'>智能粘贴</span>
						</view>
					</li>
					<li>
						<input type="text" v-model='receiveInfo.name' placeholder="收件人姓名"/>
						<span class='iconfont icon-xingming choose_user' @click='chooseAddress(2)'></span>
					</li>
					<li>
						<input type="number" v-model='receiveInfo.tele' placeholder="手机号/固定电话"/>
					</li>
					<li>
						<input type="text" v-model='receiveInfo.address' placeholder="选择地址"/>
						<span class='iconfont icon-you' @click='chooseAddr(2)'></span>
					</li>
					<li>
						<textarea type="text" auto-height v-model='receiveInfo.detail_addr' placeholder="请输入详细地址:街道、路、小区、单元"/>
					</li>
				</ul>
				<button size="mini" @click='resetForm(2)'>重置</button>
			</form>
		</div>
		
		<!--物品类型-->
		<div class="itemlist margin_top30">
			<div class='title-div'>
				<div class='type-left'>
					<span class='iconfont icon-wupin'></span>
					<span class='title'>物品备注</span>
				</div>
				<!-- <div class="type-right">
					<span class='zhantie'>{{goodsType}}</span>
					<span class='iconfont icon-you'></span>
				</div> -->
			</div>
			<textarea auto-height class='remark' type="text" auto-height v-model='remark' placeholder="填写包裹备注信息"/>
		</div>
		
		<!--按钮组-->
		<div class='btn-div'>
			<span class='print' @click='printPackage'>直接打印</span>
			<span class='save' @click='savePackage'>保存包裹</span>
		</div>
	</view>
</template>

<script>
import Vue from 'vue';
import {mapGetters,mapActions} from 'vuex';
import {showToast,post,getClipboardData,checkPhone,checkHtml} from '../../utils/index.js';
import {addNewPackageUrl,getUserInfoByUidUrl} from '../../config.js'
export default {
	data() {
		return {
			sendInfo: {  //寄件人信息
				name: '', //姓名
				tele: '',  //电话
				address: '', //省市区
				detail_addr: '', //详细地址信息
			},
			receiveInfo: {  //收件人信息
				name: '', //姓名
				tele: '',  //电话
				address: '', //省市区
				detail_addr: '', //详细地址信息
			},
			goodsType: '服饰',  //物品类型
			remark: '',  //包裹备注信息
		};
	},
	computed: {
		...mapGetters(['getSendPackageTo','userInfo'])
	},
	onShow(){
		let uid = this.$mp.query.uid;  //被扫码进来才有用户的uid
		if(uid){
			this.getUserInfoByUid(uid);
		}
	},
	methods: {
		//根据用户的uid获取用户的信息
		getUserInfoByUid(uid){
			let self = this;
			post(getUserInfoByUidUrl, {
				session_token: self.session_token,
				uid: uid
			})
			.then((res)=>{
				if(res.code==200){
					let data = res.data;
					self.receiveInfo = {  //收件人信息
						name: data.name, //姓名
						tele: data.tele,  //电话
						address: data.address, //省市区
						detail_addr: data.detail, //详细地址信息
					};
					let tmpObj = {
						img: data.img,
						name: data.name,
						uid: uid,
						isMe: false
					};
					self.$store.dispatch('setSendPackageTo', tmpObj);
				}else{
					showToast(res.errMsg);
				}
			});
		},
		//选择将包裹提交给谁，页面跳转
		choosePerson(){
			uni.navigateTo({
				url: '/pages/partner/index'
			});
		},
		//重置表格
		resetForm(type){
			if(type==1){  //寄件
				this.sendInfo = { 
					name: '', //姓名
					tele: '',  //电话
					address: '', //省市区
					detail_addr: '', //详细地址信息,
				};
			}else{
				this.receiveInfo = { 
					name: '', //姓名
					tele: '',  //电话
					address: '', //省市区
					detail_addr: '', //详细地址信息
				}
			}
		},
		//智能粘贴
		AICopy(index){
			let self = this;
			getClipboardData()
			.then((res)=>{
				var dataArr = res.split('\n');
				if(dataArr.length==1){
					showToast('剪贴板内容不合规');
					return;
				}else{
					let tmpObj = { 
						name: dataArr[0], //姓名
						tele: dataArr[1],  //电话
						address: dataArr[2], //省市区
						detail_addr: dataArr[3], //详细地址信息
					};
					if(index==1){
						self.sendInfo = tmpObj;
					}else{
						self.receiveInfo = tmpObj;
					};
				}
			})
			.catch(()=>{});
		},
		//从已添加过的地址中选择地址
		chooseAddress(index){
			let url = "/pages/address/list/index";
			if(index==2){  //我的收件人
				url += "?mine=1";
			};
			uni.navigateTo({
				url: url
			});
		},
		//选择地址
		chooseAddr(type){
			var self = this;
			uni.chooseLocation({
				success(res){
					//console.log(res)
					if(type==1){  //寄件
						self.sendInfo.address = res.address;
						self.sendInfo.detail_addr = res.name;
					}else{
						self.receiveInfo.address = res.address;
						self.receiveInfo.detail_addr = res.name;
					}
				}
			});
		},
		//保存包裹
		savePackage(){
			var self = this;
			if(!this.getSendPackageTo.img){
				showToast('请先选择伙伴');
				return;
			};
			if(!this.sendInfo.name || !this.sendInfo.tele ||
				!this.sendInfo.address || !this.sendInfo.detail_addr
				|| !this.receiveInfo.name || !this.receiveInfo.tele ||
				!this.receiveInfo.address || !this.receiveInfo.detail_addr){
				showToast('请将信填写完整');
				return;
			};
			if(checkHtml(this.sendInfo.name)){
				showToast('寄件人名字中包含非法字符');
				this.sendInfo.name = '';
				return;
			};
			if(checkHtml(this.receiveInfo.name)){
				showToast('收件人名字中包含非法字符');
				this.receiveInfo.name = '';
				return;
			};
			if(!checkPhone(this.sendInfo.tele)){
				showToast('寄件人电话输入不规范');
				return;
			};
			if(!checkPhone(this.receiveInfo.tele)){
				showToast('收件人电话输入不规范');
				return;
			};
			if(checkHtml(this.sendInfo.address)){
				showToast('寄件人地址中包含非法字符');
				this.sendInfo.address = '';
				return;
			};
			if(checkHtml(this.receiveInfo.address)){
				showToast('收件人地址中包含非法字符');
				this.receiveInfo.address = '';
				return;
			};
			if(checkHtml(this.sendInfo.detail_addr)){
				showToast('寄件人详细地址中包含非法字符');
				this.sendInfo.detail_addr = '';
				return;
			};
			if(checkHtml(this.receiveInfo.detail_addr)){
				showToast('收件人详细地址中包含非法字符');
				this.receiveInfo.detail_addr = '';
				return;
			};
			
			let dataObj = {
				session_token: self.userInfo.session_token,
				id: self.getSendPackageTo.uid,
				send_uname: self.sendInfo.name,
				send_telephone: self.sendInfo.tele,
				send_address: self.sendInfo.address,
				send_detail_addr: self.sendInfo.detail_addr,
				receive_uname: self.receiveInfo.name,
				receive_telephone: self.receiveInfo.tele,
				receive_address: self.receiveInfo.address,
				receive_detail_addr: self.receiveInfo.detail_addr,
				remark: self.remark
			};
			post(addNewPackageUrl, dataObj)
			.then((res)=>{
				if(res.code==200){
					showToast('保存成功');
					setTimeout(()=>{
						uni.switchTab({
							url: '/pages/pengdingpackage/index',
							success(res){
								let page = getCurrentPages().pop();
								if (page == undefined || page == null) { 
									return;
								};
								page.onLoad();
							}
						});
					},1500);
				}else{
					showToast(res.errMsg);
				}
			});
		},
		//直接打印包裹
		printPackage(){
			showToast('该函数未完成，todo...');
		}
	}
}
</script>

<style lang="less">
@import '../../style/default.less';
page{
	padding-bottom: 120upx;
}
/*头部信息*/
.header-div{
	display: flex;
	align-items: center;
	image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.tip{
		flex: 1;
		.tip1{
			color: #999;
			font-size: 20upx;
		}
	}
}
/**寄件人信息**/
.itemlist{
	padding: 0 20upx;
	box-sizing: border-box;
	background: #fff;
	form{
		overflow: hidden;
		ul{
			li{
				min-height: 60upx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #e5e5e5;
				.jiheader{
					width: 100%;
					height: 80upx;
					display: flex;
					align-items: center;
					.ji{
						color: #007AFF;
						border: 1px solid #007AFF;
						border-radius: 50%;
						text-align: center;
						display: inline-block;
						width: 40upx;
						height:40upx;
						line-height: 40upx;
					}
					.shou{
						color: @mainColor;
						border: 1px solid @mainColor;
					}
					.title{
						flex: 1;
						margin-left: 10upx;
					}
					.zhantie{
						color:#007AFF;
					}
				}
				input{
					flex:1;
				}
				span.iconfont{
					font-size: 40upx;
				}
				.choose_user{
					color: #007AFF;
				}
			}
		}
		button{
			margin: 20upx 20%;
			width: 60%;
			border: 1px solid #007AFF;
			color: #007AFF;
			background: #fff;
		}
	}
	/**物品类型**/
	.title-div{
		height: 60upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e5e5e5;
		.type-left,.type-right{
			flex:1;
			height: 100%;
			display: flex;
			align-items: center;
		}
		.type-left{
			span.iconfont{
				font-size: 60upx;
				margin-right: 10upx;
				color: @mainColor;
			}
		}
		.type-right{
			justify-content: flex-end;
		}
	}
	/**备注信息**/
	.remark{
		min-height: 80upx;
		text-indent: 20upx;
		padding: 20upx;
		box-sizing: border-box;
	}
}
/**按钮组**/
.btn-div{
	position: fixed;
	width: 100%;
	height: 80upx;
	bottom: 0;
	display: flex;
	text-align: center;
	z-index:2;
	span{
		flex:1;
		color: #fff;
		line-height: 80upx;
		font-size: 30upx;
	}
	span.print{
		background: #007AFF;
	}
	span.save{
		background: @mainColor;
	}
}
</style>
